﻿///<reference path="../control.js" />

(function() {



		amp.UI.Offset = function(left, top) {
			this.left = left;
			this.top = top;
			this[0] = left;
			this[1] = top;
		}

		amp.UI.Size = function(width, height) {
			this.width = width;
			this.height = height;
			this[0] = width;
			this[1] = height;
		}

		amp["class"]("amp.UI.Offset", null, amp.UI.Offset);
		amp["class"]("amp.UI.Size", null, amp.UI.Size);



		document.viewport = {
			getDimensions: function() {
				var dimensions = {};
				("Width,Height").split(",").each(function(D) {
					var d = D.toLowerCase();
					var test = (amp.Browser.Opera) ? document.body['client' + D] : document.documentElement['client' + D];
					dimensions[d] =
						(amp.Browser.Webkit && !document.evaluate) ? self['inner' + D] : test;
				});
				return dimensions;
			},

			getWidth: function() {
				return this.getDimensions().width;
			},

			getHeight: function() {
				return this.getDimensions().height;
			},

			getScrollOffsets: function() {
				return new amp.UI.Offset(
					window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft,
					window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop);
			}
		};

		var view = document.viewport;


		var helpers = {
			size: function(element, width, height) {
				if (arguments.length == 1) {
					element = amp(element);
					return new amp.UI.Size(element.width(), element.height());
				}

				amp(element).css({
					"width": width + "px",
					"height": height + "px"
				});
			},

			position: function(element, x, y) {
				element = amp(element);
				var viewSize = document.viewport.getDimensions(),
					viewScroll = document.viewport.getScrollOffsets(),
					elementSize = helpers.size(element);


				var pageY = (y + viewScroll.top),

					leftPos = (
							((x + elementSize.width) > viewSize.width) ? (viewSize.width - elementSize.width) : x
						) + "px",

					topPos = (
							(((y + elementSize.height) > viewSize.height) && (pageY > elementSize.height)) ? (y - elementSize.height) : y
						) + "px";

				var index = element.css("zIndex");

				element.css({
					left: leftPos,
					top: topPos,
					position: 'absolute',
					zIndex: index ? index : 10
				});


				return element;
			},
			center: function(element) {
				element = amp(element);


				var elementSize = helpers.size(element);
				viewSize = document.viewport.getDimensions(),
					viewOffset = document.viewport.getScrollOffsets();

				var xLeft = (viewOffset.left + Math.floor((viewSize.width - elementSize.width) / 2)) + "px";
				var xTop = (viewOffset.top + Math.floor((viewSize.height - elementSize.height) / 2)) + "px";

				index = element.css("zIndex");

				element.css({
					top: xTop,
					left: xLeft,
					position: "absolute",
					zIndex: index || 10
				});
			}

		};

		amp.extend(amp.UI.Dom.prototype, {
			center: function() {
				this.wrapper.get().invoke(helpers.center);
				return this;
			},
			position: function(x, y) {
				if (arguments.length == 2) {
					this.wrapper.get().invoke(helpers.position, x, y);
					return this;
				}
				return helpers.position(this.get());
			},

			size: function(width, height) {
				if (arguments.length == 2) {
					this.wrapper.get().invoke(helpers.size, width, height);
					return this;
				}
				return helpers.size(this.get());
			}
		});


		var panel = function(params) {
			this.configure(params);

		}

		panel.prototype = {
			centered: false,
			style: {
				width: "300px",
				height: "300px",
				display: "block",
				zIndex: 10
			},
			rendered: false,



			mask: false,

			effects: {
				show: function(element) {
					amp(element).show();
				},
				hide: function(element) {
					amp(element).hide();
				}
			},



			mapDom: function() {
				var q = this.query;
				if (q) {
					this.panel = amp.isString(q) ? amp("#" + q) : amp(q);
					if (this.center)
						this.panel.center();
				}
			},

			mapEvents: function() {

			},

			show: function() {
				if (!this.rendered)
					this.render();
				this.effects.show();
				if (this.centered)
					this.panel.center();
			},

			hide: function() {
				this.effects.hide(this.panel.get());
			},

			position: function(x, y) {
				this.panel.position(x, y);
			},

			render: function() {
				this.rendered = true;
				this.panel.css(this.style);

				this.panel.center();
			}
		}



		amp.UI.Panel = amp["class"]("amp.UI.Panel", amp.UI.Control, panel.prototype);

	})();